<template>
	<view class="index_box">
		<view class="index_main">
			<div class="dis_fx tit_box fx_column">
				<view class="index_pub_tit dis_fx fx_column">
					<image src="../../static/tuzi_icon.png"></image>
					<view class="tit">{{productTypesNames[productIndex]}}</view>
					<text>Package Tour</text>
				</view>
				<!-- <select @change="changeType">
					<option value="" >切换类型</option>
					<option :value="item.productTypeId" v-for="item in productTypes">{{item.productTypeName}}</option>
				</select> -->
				<picker @change="changeType" :value="productIndex" :range="productTypesNames">
					<view class="uni-input">切换类型</view>
				</picker>
			</div>
			<view class="type_menu dis_fx">
				<view :class="destinationsIndex==index?'cur':'' " v-for="(item,index) in productType.destinations" @click="tabDestination(index)">{{item.destination}}</view>
			</view>
			<view class="pro_box">
				<view class="item" v-for="item in products" @click="toNewPage('/pages/attractionsDetail/attractionsDetail?productId='+item.productId)">
					<view class="item_con">
						<view class="fz_0"><image :src="item.productMasterDiagram" mode="aspectFill"></image></view>
						<view class="text">
							<view class="tit text-ellipsis-2">
								<view class="tag dis_il"><text>{{item.productDestination}}</text>{{item.productTypeName}}</view>
								<view class="dis_il">{{item.productName}}</view>
							</view>
							<view class="text-ellipsis-1">{{item.productSubtitle}}</view>
							<view class="text-ellipsis-1">特色：{{item.productCharacteristics || "   "}}</view>
						<!-- 	<view class="text-ellipsis-1">成团人数：2-8人</view> -->
							<view class="addit">
								<view>行程天数： {{item.productJourney || "1"}}<text class="addr">集合地：{{item.productRendezvous || ""}}</text></view>
								<view class="price">￥<text>{{item.minPrice || "0.00"}}</text>元起</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../common/util.js'
	export default {
		data() {
			return {
				productTypes: [],
				productTypesNames:[],
				productIndex:0,
				productType:{},
				destinations:[],
				destinationsIndex:0,
				products:[],
				
			}
		},
		onLoad(options) {
			var that=this;
			var productIndex=options.productIndex;
			var destinationsIndex=options.destinationsIndex;
			if(productIndex){
				that.productIndex=productIndex;
			}
			if(destinationsIndex){
				that.destinationsIndex=destinationsIndex;
			}
		},
		onShow() {
			this.getHomeInitData()
		},
		methods: {
			//切换目的地
			tabDestination(index){
				var that =this;
				that.destinationsIndex=index
				// that.products=that.destinations[index].products
				var products=that.destinations[index].products
				that.searchData(products[0].productTypeId,products[0].productDestination)
			},
			//切换类型
			changeType(e){
				var that =this;
				that.productIndex=e.detail.value;
				that.productType=that.productTypes[e.detail.value]
				that.destinations=that.productType.destinations
				that.destinationsIndex=0;
				that.products=that.destinations[0].products
				console.log(e)
			},
			toNewPage(url) {
				uni.navigateTo({url});
			},
			
			//加载搜索数据
			searchData (typeId,keywords) {
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				var that = this
				var params={
					typeId:typeId,
					keywords:keywords
				}
				util.fetchPost('/api/product/search', params, function(res){					
					that.products=res.data
					uni.hideLoading();
				},function(err){
					
				},false)				
			},
			
			//加载数据
			getHomeInitData () {
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				var _self = this
				util.fetchGet('/api/index/appIndex', {}, function(res){					
					_self.productTypes = res.data.productTypes
					var productTypesName=[]
					for(var i in res.data.productTypes){
						productTypesName.push(res.data.productTypes[i].productTypeName)
					}
					_self.productTypesNames=productTypesName;
					_self.productType=res.data.productTypes[_self.productIndex];
					/* 
					_self.destinations=res.data.productTypes[_self.productIndex].destinations
					_self.products=res.data.productTypes[_self.productIndex].destinations[_self.destinationsIndex].products */
					
					_self.searchData(_self.productType.productTypeId,'');
					
					uni.hideLoading();
				},function(err){
					
				},false)				
			}
		}
	}
	
</script>
<style>
	.pro_box{
		padding: 80upx 60upx 0;
		font-size: 0;
	}
	.pro_box .item{
		width: 100%;
		margin-bottom: 40upx;
	}
	.pro_box .item_con{
		box-shadow: 0 0 5upx 1upx #F0F0F0;
		border-radius: 20upx;
	}
	.pro_box .item image{
		width: 100%;
		height: 285upx;
		border-radius: 20upx 20upx 0 0;
		box-shadow: 0 5upx 5upx 0upx #CECCCD;
	}
	.pro_box .item .text{
		padding: 10upx;
		border-radius:10upx;
		font-size: 16upx;
		color: #707070;
		line-height: 1.6;
	}
	.pro_box .item .tit{
		font-size: 26upx;
		color: #313131;
		line-height: 1.7;
		margin-bottom: 6upx;
	}
	.pro_box .item .tit .tag{
		background: #fd5c1e;
		font-size: 19upx;
		color: #fff;
		padding: 0 20upx;
		border-radius: 16upx;
		display: inline-block;
		margin-right: 25upx;
	}
	.pro_box .item .tit .tag text{
		padding-right: 10upx;
	}
	.pro_box .item .tit .tag text:after{
		content: '';
		width: 1px;
		height: 16upx;
		background: #fff;
		display: inline-block;
		margin-left: 10upx;
	}
	.pro_box .item .addit{
		font-size: 19upx;
		color: #707070;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pro_box .item .addit .price{
		color: #fc5c1e;
		display: flex;
		align-items: center;
	}
	.pro_box .item .addit .addr{
		padding-left: 10upx;
	}
	.pro_box .item .addit .addr:before{
		content: '';
		display: inline-block;
		width: 1px;
		height: 20upx;
		background: #a3a3a3;
		margin-right: 10upx;
	}
	.pro_box .item .addit .price text{
		font-size: 41upx;
		font-family: 'priceFont';
	}
	.type_menu{
		padding: 0 60upx;
	}
	.type_menu>view{
		margin: 0 7upx;
		border: 1px solid #070002;
		flex: 1;
		text-align: center;
		height: 44upx;
		line-height: 42upx;
	}
	.type_menu>view.cur{
		background: #313131;
		color: #ffc801;
	}
	.tit_box{
		padding: 0 60upx;
		justify-content: space-between;
	}
	.tit_box select{
		border: 0 none;
		font-size: 2upx;
		color: #313131;
		appearance:none;
		-moz-appearance:none;
		-webkit-appearance:none;
		background: url(../../static/select_icon.png) no-repeat right center/25upx 15upx;
		padding-right: 30upx;
	}
	.index_pub_tit{
		padding: 60upx 0;
	}
	.index_pub_tit image{
		width: 21upx;
		height: 48upx;
	}
	.index_pub_tit .tit{
		font-size: 32upx;
		color: #313131;
		font-weight: 600;
		margin: 0 10upx 0 25upx;
	}
	.index_pub_tit text{
		font-size: 27upx;
		color: #313131;
		font-weight: normal;
	}
</style>
